<template>
  <!-- 台班分析  -->
  <div class="roadStyle">
    <dv-border-box-1
      backgroundColor="rgba(5, 29, 53, 0.9)"
      class="dv-border-box-1"
    >
      <div style="height: 100%">
        <span class="cleanCar-content-right-title">台班分析</span>
        <div
          ref="workanalysis"
          class="workanalysis"
        ></div>
      </div>
    </dv-border-box-1>
  </div>
</template>
<script  setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});

// 定义值
let workanalysis = ref(); //ref的应用

// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(workanalysis.value);
  const option = {
    tooltip: {
      axisPointer: {
        type: "shadow",
      },
      trigger: "axis",
      textStyle: {
        align: "left",
      },
    },
    legend: {
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
        color: "#90D4F8",
        align: "left",
      },
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "5%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: props.carData.orgName,

      axisLine: {
        show: false,
        interval: 0,
        lineStyle: {
          color: "#468C9E",
          type: "solid",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#213862",
          width: 1,
          type: "solid",
        },
      },
    },
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#213862",
            width: 1,
            type: "solid",
          },
        },
        axisLine: {
          show: true,
          interval: 0,
          lineStyle: {
            color: "#468C9E",
            type: "solid",
          },
        },

        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        data: props.carData.currentMonthCount,
        type: "bar",
        name: "本月",
        barWidth: 10,
        symbolSize: 8,
        symbol: "circle",
        itemStyle: {
          color: "#079FFF",
        },
      },
      {
        data: props.carData.lastMonthCount,
        type: "bar",
        name: "上月",

        barWidth: 10,
        symbolSize: 8,
        symbol: "circle",
        itemStyle: {
          color: "#30F6FF",
        },
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped  lang="less">
.roadStyle {
  height: 50%;
 /deep/ .border-box-content{
  padding: 1.2rem;
    box-sizing: border-box;
}
}
.cleanCar-content-right-title {
  display: block;
  width: 66%;
  margin: 0 auto;
  padding: 24px 20px;
  font-weight: bolder;
  margin-top: 10px;
  color: #2290fe;
  font-size: 20px;
  background-image: url("../../../../../assets/images/sweepercar/blueImg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
}
.dv-border-box-1 {
  width: 100%;
}
.workanalysis {
  width: 100%;
  height: calc(100% - 78px)
}
</style>
